<template>
  <div :style="{
    'width': '100%'
  }">
    <ECharts
      :options="chartOptions"
      :auto-resize="true"
    ></ECharts>
  </div>
</template>

<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import { decimalMultiply } from "@/utils/decimal";

export default {
  name: "ChartLine",
  components: {
    ECharts
  },
  props: {
    data: {
      type: Object,
      default() {
        return {
          legend: {},
          xAxis: [],
          series: []
        };
      }
    }
  },
  data() {
    return {
      propData: this.data
    };
  },
  watch: {
    data: {
      deep: true,
      handler(v) {
        this.propData = v;
      }
    }
  },
  computed: {
    chartOptions() {
      return {
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let ret = `<span style="font-size: 16px; font-weight: 700;">${params[0].axisValue}</span>`;
            let unit = "";
            params.forEach(item => {
              if (
                ["点击均价", "千次曝光均价", "总消耗"].indexOf(
                  item.seriesName
                ) !== -1
              ) {
                unit = "元";
              } else if (item.seriesName.includes("率")) {
                unit = "%";
                item.value = decimalMultiply(item.value, 100);
              }
              ret += `<br><span style="display:inline-block; vertical-align: 4px; width: 10px; height: 2px; margin-right: 3px; background: ${item.color};"></span>${item.seriesName}：<span style="color: ${item.color}">${item.value}${unit}</span>`;
            });
            return ret;
          },
          extraCssText:
            "background: #fff; padding: 10px; color: #606266; box-shadow: 2px 3px 3px rgba(230, 231, 239, 0.7), -2px -1px 3px rgba(230, 231, 239, 0.7);"
        },
        color: [
          "#33b8ff",
          "#2773ff",
          "#f98100",
          "#feda00",
          "#f13700",
          "#53dd64"
        ],
        legend: this.propData.legend,
        grid: {
          top: "30",
          left: "50",
          right: "50",
          bottom: "0",
          containLabel: true
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#e9e9e9"
            }
          },
          axisLabel: {
            color: "#747474"
          },
          boundaryGap: false,
          data: this.propData.xAxis
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#e9e9e9"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#e9e9e9"
              }
            },
            axisLabel: {
              color: "#747474"
            }
          }
        ],
        series: this.propData.series
      };
    }
  }
};
</script>

<style scoped>
.echarts {
  width: 100%;
}
</style>